<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      补单审核
    </template>
    <el-button type="primary" style="margin-bottom:20px;" @click="doGet({action:'toGetThirdStatus'})">验证三方状态</el-button>
    <el-table
      border
      :data="[row]"
    >
      <el-table-column label="充值单号" prop="orderId">
      </el-table-column>

      <el-table-column label="三方状态" prop="thirdStatus">
        <template slot-scope="{row}">
         {{row.thirdStatus==1?'成功':(row.thirdStatus==0?'待处理':'')}}
        </template>
      </el-table-column>
       <el-table-column label="三方实际金额" prop="thirdAmount">
        <!-- <template slot-scope="{row}">
          {{row.thirdAmount | currency}}
        </template> -->
      </el-table-column>
    </el-table>
    <el-form :model="form" ref="refForm" class="supply-dialog" :rules="rules" label-width="120px" style="position:relative;right:45px;margin-top:20px;">
      <el-form-item label="附件截图">
        <div class="img-list">
          <img v-for="item in imgList" @click="openImagDialog(item)" :key="item" :src="item"
               class="image"/>
        </div>
      </el-form-item>
      <el-form-item label="审核结果" prop="status"  v-if="isClick">
        <el-radio-group v-model="form.status" size="medium">
          <el-radio-button :label="1" value="1">通过</el-radio-button>
          <el-radio-button :label="2" value="2">不通过</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" rows="3" v-model.trim="form.remark" @keyup.enter.native="$emit('input', false)"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('input', false)" :loading="loading">取 消</el-button>
      <el-button type="primary" @click="doSave({action: 'saveForm', form: 'refForm'})" :disabled="!isClick">确 定</el-button>
    </div>
    <el-dialog :visible.sync="imgDialog" :show-close="false" custom-class="img_detail" append-to-body>
      <img :src="imgUrl" alt="">
    </el-dialog>
  </el-dialog>
</template>

<script>
import { auditReorder, getThirdStatus, getRechargeOrderDetailApi } from '@/services/api/recharge';
import { form, grid } from '@/build';

export default {

  name: 'reorder-audit-dialog',

  props: ['value', 'id', 'rowData', 'menuId'],

  mixins: [form, grid],

  data() {
    return {
      isClick: false,
      result: {},
      row: {
        thirdStatus: null, // 三方状态
        orderId: this.rowData.orderId, // 充值单号
        thirdAmount: null, // 三方实际金额
      },
      form: {
        id: this.id,
        status: undefined,
        remark: undefined,
        menuId: this.menuId,
      },
      applyData: {},
      rules: {
        status: {
          required: true, message: '审核结果为必选项',
        },
        remark: [
          {
            required: true, message: '备注不能为空',
          },
          { max: 45, message: '不能超过45个字符' },
        ],
      },
      dataPermissionObj: {
        0: '普通存款',
        1: '大额存款',
      },
      failSumNum: 0,
      imgUrl: '', // 图片放大图地址
      imgList: [], // 附件列表
      imgDialog: false, // 图片放大图弹框
    };
  },
  methods: {
    openImagDialog(url) {
      this.imgDialog = true;
      this.imgUrl = url;
    },
  },
  watch: {
    // rowData: {
    //   handler(newVal) {
    //     if (!_.isEmpty(newVal)) {
    //       this.imgList = newVal.reqImg.split('|').filter(item => (item && item !== 'null' && item !== 'undefined'));
    //     }
    //   },
    //   immediate: true,
    // },
  },
  mounted() {
    this.bindSave(auditReorder, 'saveForm', 'form', {
      callback: ([result, data]) => {
        if (!result) {
          this.$notify({
            title: `保存失败.${data && data.message}`,
            type: 'error',
            duration: 2000,
          });
          return;
        }

        if (data.failOrders.length) {
          this.$notify({
            title: data.failOrders.join(','),
            type: 'error',
            duration: 2000,
          });
        }

        if (this.rowData.length && this.rowData.length > 0) {
          if (data.failList.length) {
            let html = '';
            _.each(Object.keys(data.failList[0]), (item) => {
              this.failSumNum += data.failList[0][item];
              html += `<div>${this.dataPermissionObj[item]}:${data.failList[0][item]}条</div>`;
            });
            html = `<div>你没有权限进行以下${this.failSumNum}条操作</div>${html}剩下${this.rowData.length - this.failSumNum}条操作成功`;
            this.$alert(html, '提示', { dangerouslyUseHTMLString: true });
          }

          if (this.rowData.length - this.failSumNum > 0 && data.failOrders.length === 0) {
            this.$notify({
              title: '保存成功',
              type: 'success',
              duration: 2000,
            });
          }
        } else if (data.failOrders.length === 0) {
          this.$notify({
            title: '保存成功',
            type: 'success',
            duration: 2000,
          });
        }
        this.$emit('input', false);
        this.$parent.gridSearch();
      },
      beforeSend: (data) => {
        if (this.rowData.length && this.rowData.length > 0) {
          let orderId = '';
          const orderArr = [];
          this.rowData.map((item, index) => {
            orderArr.push(item.orderId);
          });
          orderId = orderArr.join(',');
          return { ...data, orderId };
        }
        const { orderId, amount } = this.rowData;
        return { ...data, orderId, amount };
      },
      afterSuccess: ([result, data]) => {

      },
    });

    this.bindGet(getRechargeOrderDetailApi, 'result', {  //原接口调整  目前只用来获取图片
      action: 'getOrderDetail',
      beforeSend: data => ({
        orderId: this.rowData.orderId,
      }),
      callback: ([result, data]) => {
        if (result) {
          if (data) {
            this.imgList = data.attachments;
          }
        } else {
          this.$message({
            type: 'error',
            message: data.message,
          });
        }
      },
    });

    this.getAll();
    this.bindGet(getThirdStatus, 'result', {
      action: 'toGetThirdStatus',
      beforeSend: data => ({
        orderId: this.rowData.orderId,
      }),
      callback: ([result, data]) => {
        this.isClick = true;
        if (result) {
          // console.log(JSON.stringify(data));
          if (data) {
            this.row.thirdStatus = data.status;// 三方状态
            this.row.thirdAmount = data.amount;// 三方实际金额
          } else {
            this.row.thirdStatus = '--';// 三方状态
            this.row.thirdAmount = '--';// 三方实际金额
          }
        } else {
          this.$message({
            type: 'error',
            message: data.message,
          });
        }
      },
    });
  },
};
</script>

<style lang="scss" scoped>
    .img-list{
      .image {
        width: 180px;
        height:111px;
        margin-bottom:10px;
        margin-right: 13px;
      }
    }
  /deep/ {
    .supply-dialog{
      /deep/ {
        .el-form-item:first-child{
          margin-bottom:0px;
        }
      }
    }
    .img_detail {
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body{
        padding: 0px;
        font-size: 0px;
      }
      img {
        width: 100%;
      }
    }
  }
</style>
